import React from 'react';
import TweenOne from 'rc-tween-one';
import PropTypes from 'prop-types';
import css from './index.less';

export default class SlowAction extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    path: PropTypes.string,
  };

  static defaultProps = {
    name: 'linear',
    path: 'M0,60 L1.2,59.4 2.4,58.8 3.6,58.2 4.8,57.6 6.0,57.0 7.2,56.4 8.4,55.8 9.6,55.2 10.8,54.6 12.0,54.0 13.2,53.4 14.4,52.8 15.6,52.2 16.8,51.6 18.0,51.0 19.2,50.4 20.4,49.8 21.6,49.2 22.8,48.6 24.0,48.0 25.2,47.4 26.4,46.8 27.6,46.2 28.8,45.6 30.0,45.0 31.2,44.4 32.4,43.8 33.6,43.2 34.8,42.6 36.0,42.0 37.2,41.4 38.4,40.8 39.6,40.2 40.8,39.6 42.0,39.0 43.2,38.4 44.4,37.8 45.6,37.2 46.8,36.6 48.0,36.0 49.2,35.4 50.4,34.8 51.6,34.2 52.8,33.6 54.0,33.0 55.2,32.4 56.4,31.8 57.6,31.2 58.8,30.6 60.0,30.0 61.2,29.4 62.4,28.8 63.6,28.2 64.8,27.6 66.0,27.0 67.2,26.4 68.4,25.8 69.6,25.2 70.8,24.6 72.0,24.0 73.2,23.4 74.4,22.8 75.6,22.2 76.8,21.6 78.0,21.0 79.2,20.4 80.4,19.8 81.6,19.2 82.8,18.6 84.0,18.0 85.2,17.4 86.4,16.8 87.6,16.2 88.8,15.6 90.0,15.0 91.2,14.4 92.4,13.8 93.6,13.2 94.8,12.6 96.0,12.0 97.2,11.4 98.4,10.8 99.6,10.2 100.8,9.6 102.0,9.0 103.2,8.4 104.4,7.8 105.6,7.2 106.8,6.6 108.0,6.0 109.2,5.4 110.4,4.8 111.6,4.2 112.8,3.6 114.0,3.0 115.2,2.4 116.4,1.8 117.6,1.2 118.8,0.6 120.0,0.0'
  };

  constructor(props) {
    super(props);
    this.state = {
      tagPlay: false
    };
  }

  render() {
    const { name, path } = this.props;
    const tweenProps = {
      className: css.tag,
      animation: {
        marginTop: '38px',
        duration: 1500,
        ease: name
      }
    };
    return (
      <div
        className={css.graph}
        onMouseOver={() => {
          this.setState({
            tagPlay: true
          });
        }}
        onMouseOut={() => {
          this.setState({
            tagPlay: false
          });
        }}
      >
        <div className={css.box}>
          <svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" x2="120" y1="0" y2="0"/>
            <line x1="0" x2="120" y1="60" y2="60"/>
            <path d={path}/>
          </svg>
          {
            this.state.tagPlay && <TweenOne {...tweenProps}/>
          }
        </div>
      </div>
    );
  }

}
